<template>
  <div class="jf-user-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-notebook-2" /> 掘粪</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" size="mini" class="demo-form-inline table-top-bar">
      <el-form-item>
        <el-input v-model="queryInfo.nickname" placeholder="搜索用户" clearable @input="searchBtn = false" @clear="getJfUsers" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" :disabled="searchBtn" @click="getJfUsers">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <vxe-table
      align="left"
      :data="jfUserList"
      :loading="loading"
      max-height="600"
    >
      <vxe-column type="seq" width="60" />
      <vxe-column field="username" title="用户名" />
      <vxe-column field="nickname" title="昵称" />
      <vxe-column title="头像" width="80">
        <template #default="{ row }">
          <el-image
            v-if="row.avatar"
            style="width: 45px; border-radius: 50%"
            :src="$config.staticURL + row.avatar"
            :preview-src-list="[$config.staticURL + row.avatar]"
          />
        </template>
      </vxe-column>
      <vxe-column field="phone" title="手机号码" />
      <vxe-column title="状态">
        <template #default="{ row }">
          <vxe-button v-if="row.status === 1" status="success" content="正常" @click="statusJfUsers(row, 0, '禁用')" />
          <vxe-button v-if="row.status === 0" status="info" content="禁用" @click="statusJfUsers(row, 1, '启用')" />
        </template>
      </vxe-column>
      <vxe-column field="create_time" title="注册时间" />
      <template #empty>
        <span style="color: red;">
          <p>没有更多数据了！</p>
        </span>
      </template>
    </vxe-table>
    <!-- 分页 -->
    <vxe-pager
      background
      size="small"
      :loading="loading"
      :current-page="queryInfo.pageIndex"
      :page-size="queryInfo.pageRow"
      :total="total"
      :page-sizes="[10, 20, 50, 100,]"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import { getJfUsers, statusJfUsers } from '@/api/jf_user'
export default {
  name: 'JfUser',
  components: {},
  props: {},
  data () {
    return {
      loading: false,
      searchBtn: true,
      queryInfo: {
        pageIndex: 1,
        pageRow: 10,
        nickname: ''
      },
      jfUserList: [],
      total: 0
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getJfUsers()
  },
  mounted () {},
  methods: {
    getJfUsers: async function () {
      this.loading = true
      const data = {
        pageIndex: this.queryInfo.pageIndex,
        pageRow: this.queryInfo.pageRow,
        nickname: this.queryInfo.nickname
      }
      const res = await getJfUsers(data)
      this.loading = false
      this.jfUserList = res.list
      this.total = res.count
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.queryInfo.pageIndex = currentPage
      this.queryInfo.pageRow = pageSize
      this.getJfUsers()
    },
    statusJfUsers: async function (row, status, text) {
      const confirm = await this.$confirm(`确定要 ${text} ${row.nickname} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { return true }).catch(() => { return false })
      if (confirm) {
        const data = {
          id: row.id,
          status: status
        }
        const res = await statusJfUsers(data)
        if (res) {
          this.$message({ message: `${text}成功`, type: 'success', duration: 1000 })
          this.getJfUsers()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.jf-user-container {
  color: var(--main-color);
  background-color: var(--main-bg-color);
  border-color: var(--main-bg-color);
  padding: 15px;
  ::v-deep .vxe-grid {
    .jf-user-search {
      padding: 20px 15px;
    }
  }
}
</style>
